/* BODY */

body {

		background-color: whitesmoke; /* #919185 / #919195 */
		
}

#bloc_page {

		margin: auto;
		position: relative;
		top: 50px;
		width: 1000px;
		height: 650px;
		
		border: 1px solid #17182e;
		box-shadow: 0px 0px 15px #17182e;
		background-color: grey;
	
}

		#logo_free {
		
				position: relative;
				width: 130px;
				height: 128px;
		
				background-image: url('../../images/coin_haut_gauche_back_office.png');
                opacity: 0.6;
                border: 0px solid black;
			
		}


		header {
		
				position: absolute;
				top: -10px;
				left: 10px;

				width: 270px;
				height: 50px;
		
				text-align: center;
				font-family: 'TangerineRegular';
				font-size: 1.5em;
				color: #17182e;
		
				text-shadow: 0px 0px 20px white;
			
		}

		header a {
		
				text-decoration: none;
				color: #17182e;
		
		}

		#img_entete { 
		
			position: relative;
			bottom: 170px;
			left: 340px;
			width: 620px;
			height: 180px;
				
			border: 0px solid blue;
		
		}
		
				#img_1, #img_2, #img_3, #img_4 {
				
						
                        opacity: 0.7;
				
				}
		
				#img_1 {
				
						position: relative;
						bottom: 0px;
						left: 20px;
						width: 130px;
						height: 180px;
						
						background-image: url('images/img_entete_back_office/img_1.png');
						
						border: 0px solid red;
                        box-shadow: 0px 0px 20px red;
						
				}
				
				#img_2 {
				
						position: relative;
						bottom: 180px;
						left: 170px;
						width: 130px;
						height: 180px;
						
						background-image: url('images/img_entete_back_office/img_2.png');
						
						border: 0px solid red;
                        box-shadow: 0px 0px 20px blue;
				
				}
				
				#img_3 {
				
						position: relative;
						bottom: 360px;
						left: 320px;
						width: 130px;
						height: 180px;
						
						background-image: url('images/img_entete_back_office/img_3.png');
						
						border: 0px solid red;
                        box-shadow: 0px 0px 20px green;
				
				}
				
				#img_4 {
				
						position: relative;
						bottom: 540px;
						left: 470px;
						width: 130px;
						height: 180px;
						
						background-image: url('images/img_entete_back_office/img_4.png');
						
						border: 0px solid red;
                        box-shadow: 0px 0px 20px yellow;
				
				}

		#menu_haut {
		
				position: absolute;
				top: 230px;
				right: 20px;
		
				width: 700px;
				height: 25px;
				border-radius: 50px 50px 0px 0px;
				box-shadow: 0px 0px 30px #47474b;
		
				background-color: #47474b;
				opacity: 0.7;
				
				border-top: 5px groove #17182e;
				text-align: center;
			
		}

				#menu_haut nav {
				
						display: inline-block;
						position: absolute;
						top: -13px;
						left: 110px;
						width: 590px;
						height: 20px;
	
						font-size: 1em;
				
				}

						#menu_haut nav ul {
						
								list-style-type: none;
						
						}

						#menu_haut nav li {
						
								display: inline-block;
								margin-right: 20px;
						
						}

				#menu_haut a {
				
						color: white;
						text-decoration: none;
				
				}

				#menu_haut a:hover {
				
						color: #17182e;
				
				}


		#menu_gauche {
		
				position: absolute;
				bottom: 65px;
				left: -30px;
	
				width: 210px;
				height: 328px;
				border: 1px solid #17182e;
				border-radius: 0px 20px 20px 0px;
				box-shadow: 20px 20px 30px black;
	
				padding: 10px 10px 10px 10px;
	
				background-color: #47474b;
	
				text-align: justify;
				font-family: 'TangerineRegular';
				font-size: 1.8em;
				text-shadow: 0px 0px 20px black;
				opacity: 0.75;
		
		}

				#menu_gauche h2 {
				
						font-size: 1.2em;
						color: white;
						text-align: center;

				}

				#menu_gauche a {
				
						color: grey;
                        text-shadow: 0px 0px 3px grey;
						text-decoration: none;
				
				}

				#menu_gauche a:hover {
				
						color: white;
				
				}

				#menu_gauche nav {
				
						text-align: center;
						font-family: 'ImpactLabelReversedRegular';
						font-size: 0.8em;
	
						position: absolute;
						left: 5px;
						bottom: 7px;
	
						width: 190px;
				
				}

						#menu_gauche nav li {
						
								list-style-type: none;
								padding: 7px 5px 7px 5px;
								margin-bottom: 0px;
			
								border: 1px solid grey;
								
								box-shadow: 0px 0px 10px white;
			
								background-color: white;
								font-size: 0.65em;
								
						}
                        
                        #menu_gauche nav li:hover {
                        
                                list-style-type: none;
								padding: 15px 15px 15px 15px;
								margin-bottom: 0px;
			
								border: 1px solid grey;
								/* border-radius: 10px 10px 10px 15px; */
								box-shadow: 0px 0px 10px white;
			
								background-color: black;
								font-size: 0.9em;
                                opacity: 0.6;
                        }

				#coin_haut {
		
				position: relative;
				left: -30px;
				bottom: -109px;
				width: 30px;
				height: 30px;
		
				background-image: url('../../images/coin_haut_back_office.png');
				opacity: 0.1;
			
				}
		
				#coin_bas {
		
				position: relative;
				left: -30px;
				bottom: -427px;
				width: 30px;
				height: 30px;
		
				background-image: url('../../images/coin_bas_back_office.png');
				opacity: 0.6;
				
				}

		article {
		
				position: absolute;
				top: 260px;
				right: 20px;
	
				width: 640px;
				height: 330px;
	
				border-radius: 0px 0px 15px 15px;
				box-shadow: 0px 0px 10px black;
	
				padding: 10px 30px 30px 30px;
	
				background-color: silver;
				opacity: 0.8;
				
				color: black;
				font-size: 1.1em;
				overflow: auto;
				
		}

				article h2 {
				
						font-size: 1.2em;
						margin-top: 20px;
						margin-bottom: 5px;
						text-align: right;
						
				}
                                
                                article h3 {
				
						font-size: 1em;
						margin-top: 20px;
                                                margin-left: 70px;
						margin-bottom: 5px;
						text-align: left;
                                                text-decoration: none;
                                                
                                                color: black;
						
				}
                                
                                article h3 a {
				
						font-size: 1em;
						margin-top: 20px;
                                                margin-left: 70px;
						margin-bottom: 5px;
						text-align: left;
                                                text-decoration: none;
                                                
                                                color: black;
						
				}
                                
                                article h3 a:hover {
				
						font-size: 1.1em;
						margin-top: 20px;
                                                margin-left: 70px;
						margin-bottom: 5px;
						text-align: left;
                                                text-decoration: none;
                                                
                                                color: activeborder;
						
				}

				#contact_form  {
								
						text-align: right;
							
				}
							
						#infos_perso input {
							
								width: 250px;
							
						}
								
						#validation {
									
								text-align: left;
									
						}
								
						#contact_form :focus {
						
								border: 1px solid lime; color: navy;
							
						}

	footer {
	
			position: relative;
			top: 245px;
			right: 0px;
			
			width: 200px;
			height: 25px;
			padding-top: 5px;
			
			border-radius: 0px 100px 100px 0px;
			box-shadow: 0px 0px 30px #17182e;
			
			background-color: #47474b;
			opacity: 0.9;
			
			text-align: center;
			font-size: 1em;
            color: white;

	}


/*POLICES*/ 

@font-face {
    font-family: 'TangerineRegular';
    src: url('polices/tangerine/Tangerine_Regular-webfont.eot');
    src: url('polices/tangerine/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/tangerine/Tangerine_Regular-webfont.woff') format('woff'),
         url('polices/tangerine/Tangerine_Regular-webfont.ttf') format('truetype'),
         url('polices/tangerine/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TangerineBold';
    src: url('polices/tangerine/Tangerine_Bold-webfont.eot');
    src: url('polices/tangerine/Tangerine_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/tangerine/Tangerine_Bold-webfont.woff') format('woff'),
         url('polices/tangerine/Tangerine_Bold-webfont.ttf') format('truetype'),
         url('polices/tangerine/Tangerine_Bold-webfont.svg#TangerineBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ImpactLabelReversedRegular';
    src: url('polices/impact_label/Impact_Label_Reversed-webfont.eot');
    src: url('polices/impact_label/Impact_Label_Reversed-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/impact_label/Impact_Label_Reversed-webfont.woff') format('woff'),
         url('polices/impact_label/Impact_Label_Reversed-webfont.ttf') format('truetype'),
         url('polices/impact_label/Impact_Label_Reversed-webfont.svg#ImpactLabelReversedRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AlluraRegular';
    src: url('polices/allura/Allura-Regular-webfont.eot');
    src: url('polices/allura/Allura-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/allura/Allura-Regular-webfont.woff') format('woff'),
         url('polices/allura/Allura-Regular-webfont.ttf') format('truetype'),
         url('polices/allura/Allura-Regular-webfont.svg#AlluraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}